<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input v-model="listQuery.vin" placeholder="请输入VIN号" style="width: 200px;" class="filter-item" />
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
        查询
      </el-button>
      <el-button v-waves class="filter-item" type="info" icon="el-icon-refresh" @click="handleReset">
        重置
      </el-button>
      <el-button v-waves style="float:right;" class="filter-item" type="primary" icon="el-icon-download" @click="handleExport">
        导出
      </el-button>
    </div>
    <el-table
      v-loading="listLoading"
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%;"
    >
      <el-table-column :label="thLabel1" align="center" class="strong-border" :class-name="'strong-border'">
        <!-- <el-table-column :width="50" label="序号" prop="index" align="center" /> -->
        <el-table-column :width="100" label="流水线" prop="lineNo" align="center" />
        <el-table-column :width="100" label="工位" prop="ulocNo" align="center" />
        <el-table-column :width="150" label="车身号" prop="frameNo" align="center" />
        <el-table-column :width="200" label="VIN号" prop="vin" align="center" />
        <el-table-column :width="150" label="整车物料号" prop="materialNo" align="center" />
        <el-table-column :width="300" label="物料描述" prop="materialDesc" align="center" />
        <el-table-column :width="150" label="批次号" prop="sapOrderNo" align="center" />
        <el-table-column :width="200" label="时间" prop="createTime" align="center" :class-name="'strong-border'" />
      </el-table-column>
      <el-table-column :label="thLabel2" align="center">
        <!-- <el-table-column :width="50" label="序号" prop="index1" align="center" /> -->
        <el-table-column :width="100" label="流水线" prop="lineNo1" align="center" />
        <el-table-column :width="100" label="工位" prop="ulocNo1" align="center" />
        <el-table-column :width="150" label="车身号" prop="frameNo1" align="center" />
        <el-table-column :width="200" label="VIN号" prop="vin1" align="center" />
        <el-table-column :width="150" label="整车物料号" prop="materialNo1" align="center" />
        <el-table-column :width="300" label="物料描述" prop="materialDesc1" align="center" />
        <el-table-column :width="150" label="批次号" prop="sapOrderNo1" align="center" />
        <el-table-column :width="200" label="时间" prop="createTime1" align="center" />
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
  </div>
</template>
<style lang="scss">
  .strong-border {
    border-right: 4px solid #dfe6ec !important
  }
</style>
<script>
import { fetchList } from '@/api/vin-in-system/assembly-in-system'
import waves from '@/directive/waves' // waves directive
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import underscore from 'underscore'
export default {
  name: 'AssemblyInSystem',
  directives: { waves },
  components: { Pagination },
  data() {
    return {
      // 查询模块
      listQuery: {
        page: 1,
        limit: 10,
        vin: undefined,
      },
      // 表格显示
      thLabel1: '',
      thLabel2: '',
      tableKey: 0,
      list: null,
      total: 0,
      listLoading: false,
      // 导出
      downloadLoading: false
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.listLoading = true
      fetchList(this.listQuery).then(res => {
        if (res.code == 200) {
          this.list = this.formatList(res.data.zz1020.list, res.data.zz2030.list)
          this.total = res.data.zz1020.total > res.data.zz2030.total ? res.data.zz1020.total : res.data.zz2030.total
          this.thLabel1 = '总装10至20在制品数 ' + res.data.zz1020.total
          this.thLabel2 = '总装20至30在制品数 ' + res.data.zz2030.total
        } else {
          this.$message.error('服务器内部错误！');
        }
        this.listLoading = false
      })
    },
    formatList(list1, list2) {
      const baseList = list1.length > list2.length ? list1 : list2
      const list = []
      // 调整字段顺序
      for (let i = 0; i < baseList.length; i++) {
        const item1 = list1[i] ? {
          lineNo: list1[i].lineNo,
          ulocNo: list1[i].ulocNo,
          frameNo: list1[i].frameNo,
          vin: list1[i].vin,
          // index:  list2[i].index,
          materialNo: list1[i].materialNo,
          materialDesc: list1[i].materialDesc,
          sapOrderNo: list1[i].sapOrderNo,
          createTime: list1[i].createTime
        } : {
          lineNo: '',
          ulocNo: '',
          frameNo: '',
          vin: '',
          // index:  list2[i].index,
          materialNo: '',
          materialDesc: '',
          sapOrderNo: '',
          createTime: '',
        }
        const item2 = list2[i] ? {
          lineNo1: list2[i].lineNo,
          ulocNo1: list2[i].ulocNo,
          frameNo1: list2[i].frameNo,
          vin1: list2[i].vin,
          // index:  list2[i].index,
          materialNo1: list2[i].materialNo,
          materialDesc1: list2[i].materialDesc,
          sapOrderNo1: list2[i].sapOrderNo,
          createTime1: list2[i].createTime,
        } : {
          lineNo1: '',
          ulocNo1: '',
          frameNo1: '',
          vin1: '',
          // index:  list2[i].index,
          materialNo1: '',
          materialDesc1: '',
          sapOrderNo1: '',
          createTime1: '',
        }
        const item = Object.assign(item1,item2)
        list.push(item)
      }
      return list
    },
    // 查询
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },
    // 重置
    handleReset() {
      this.listQuery = {
        page: 1,
        limit: 10,
        vin: undefined,
      }
    },
    // 导出
    handleExport() {
      this.downloadLoading = true
      const data = {
        page: -1,
        limit: -1,
        vin: this.listQuery.vin
      }
      fetchList(data).then(res => {
        if (res.code == 200) {
          import('@/vendor/Export2Excel').then(excel => {
            const multiHeader = [[this.thLabel1, '', '', '', '', '', '', '', this.thLabel2, '', '', '', '', '', '', '']]
            const header = ['流水线', '工位', '车身号', 'vin号', '物料号', '物料描述', '批次号', '时间', '流水线', '工位', '车身号', 'vin号', '物料号', '物料描述', '批次号', '时间']
            const data = this.formatList(res.data.zz1020, res.data.zz2030).map(v => underscore.values(v))
            const merges = ['A1:H1', 'I1:P1']
            excel.export_json_to_excel({
              multiHeader,
              header,
              filename: '总装在制' + new Date().valueOf(),
              merges,
              data
            })
            this.downloadLoading = false
          })
          
        } else {
          this.$message.error('服务器内部错误！');
        }
        this.listLoading = false
      })
        
    },
  }
}
</script>